<template>
  <div class="home">
    <h1 class="art-font" style="margin-left: 20px;margin-right: 20px;">欢迎使用页面在线设计</h1>
    <h2 class="art-font">支持的页面类型</h2>
    <div class="page-type-tags">
      <RouterLink
        to="/builder-h5"
        class="page-type-tag art-font"
      >
        <div class="art-font">H5</div>
      </RouterLink>
      <div class="page-type-tag art-font">
        <div class="art-font">WEB</div>
      </div>
      <div class="page-type-tag art-font">
        <div class="art-font">门户页</div>
      </div>
      <div class="page-type-tag art-font">
        <div class="art-font">大屏</div>
      </div>
    </div>
  </div>

<!--  <JSkeleton :row="10" />-->
<!--  <DyncComp comp-lib="comptest" comp-name="MyTest"/>-->

<!--  <DyncComp comp-lib="jdccrafto" comp-name="JdcCraBox01" :def="itemDef"  />

  <JdcCraBox01 v-if="ready" :def="itemDef" def-path="ele_style"></JdcCraBox01>-->

<!--  <DynModule :def="itemDef"></DynModule>-->

  <<!--VJsoneditor
    key="dftView"
    v-model="jsonValue"
    class="json-editor-mini"
    height="240px"
  />-->
</template>

<script setup>
import MicroTestDef from './micro-test/def.js'
import {ref} from "vue";
import {JSkeleton} from "@jzl/comps";

const itemDef = ref(null);
itemDef.value = $pageUtils.getItemByDef(MicroTestDef);

const ready = ref(false);
const jsonValue = ref({})
setTimeout(() => {
  ready.value = true;
  // alert(1)
}, 5000);
</script>
<style lang="scss">
.home {
  padding-top: 100px;
  text-align: center;

  h1 {
    font-weight: bold;
    font-size: 50px;
    margin-bottom: 20px;
  }

  h2 {
    margin-bottom: 50px;
  }
}

.page-type-tags {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

.page-type-tag {
  width: 200px;
  height: 80px;
  border-radius: 10px;
  font-weight: bold;
  font-size: 40px;
  background: #F1F5FE;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 10px;
}
</style>
